<template>
  <div>
    <!-- 覆盖版即将到站 2018/3/7 11:44 zuoW -->
    <Row>
      <i-col span="24">
        <!--<Tabs v-model="tabParam.status">
          <template v-for="item in orderStatues">
            <TabPane :label="item.label" :name="item.val"></TabPane>
          </template>
        </Tabs>-->

        <!--即将到站-->
        <!--<tablePage ref="inspectionTab" :filterMethod="tabFilterMethod" :api="queryMainOrderListByPage" :param="tabParam" sort-name="orderNo" sort-type="desc" :isStartLoad="true"-->
        <!--v-if="tabParam.status==orderStatues[1].val">-->
        <!--<template slot-scope="props">-->
        <!--<Table :columns="comingStationColumn" :data="props.data" @on-sort-change="props.sortChange" border @on-selection-change="mainOrderTabSelectChange"></Table>-->
        <!--</template>-->
        <!--</tablePage>-->

        <!--已到站-->
        <tablePage ref="inspectionTab" :filterMethod="tabFilterMethod" :api="queryFleetOrderListByPage" :param="tabParam" :isStartLoad="true"
                   v-if="tabParam.status==orderStatues[0].val">
          <template slot-scope="props">
            <Table :columns="notDispatchedColumn" :data="props.data" @on-sort-change="props.sortChange" border @on-selection-change="mainOrderTabSelectChange"></Table>
          </template>
        </tablePage>
      </i-col>
    </Row>

    <xlinkModal v-model="operatModal.viewDetailShow" className="vertical-center-modal" title="查看详情" width="1000">
      <viewDetail v-if="operatModal.viewDetailShow" :currentMainOrder="mainOrderCurrentRow" @dispatchTofleetDataRefresh="thisDataRefresh"></viewDetail>
    </xlinkModal>

    <!-- 选择车队，要派单了（整列派单，派单逻辑交给父页面） -->
    <xlinkModal v-model="operatModal.dispatchModalShow" className="vertical-center-modal" title="整列派单" width="700">
      <dispatchToFleet v-if="operatModal.dispatchModalShow" @close="operatModal.dispatchModalShow = false" @assignment="assignmentToFleet"></dispatchToFleet>
    </xlinkModal>
  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import {queryFleetOrderListByPage, dispatchRemove} from '@api/backEnd/mainOrder/index'
  import xlinkModal from '@components/modal/xlinkModal'
  import sendNoticeMainOrder from '../mainOrder/components/sendNoticeMainOrder'
  import {assignmentOrder} from '@api/backEnd/station/index'
  import viewDetail from './components/topFleet/viewDetail'
  import moment from 'moment'
  import {mapGetters} from 'vuex'
  import dispatchToFleet from './components/topFleet/dispatchToFleet'

  export default {
    name: 'coming--tation-inspection',
    data () {
      let dispatchOrderType = 'dispatchOrder'
      let operatModal = {
        viewDetailShow: false,
        sendNoticeShow: false,
        assignmentOrderShow: false,
        dispatchDriverShow: false,
        viewDetailForFleetShow: false,
        dispatchModalShow: false,
        autoDispatchOrderShow: false
      }
      let mainOrderCurrentRow = {}
      /* 即将到站 */
      let comingStationColumn = [
        {
          type: 'index',
          width: 60
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '联运单号',
          key: 'orderNo',
          width: 200
        },
        {
          title: '车次',
          key: 'endTrainNumber',
          width: 100
        },
        {
          title: '所在股道',
          width: 100,
          render: (h, params) => {
            return (<span>{params.row.paraPositionTrack}</span>)
          }
        },
        {
          title: '到达时间',
          width: 250,
          render: (h, params) => {
            let thisdata = params.row.endStationTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '终点站',
          key: 'endStationName',
          width: 250
        }
      ]
      // 未派单
      let notDispatchedColumn = [
        {
          title: '联运单号',
          key: 'mainOrderNo',
          width: 200
        },
        {
          title: '派单机构',
          key: 'dispatchOrgName',
          width: 100
        },
        {
          title: '对位股道',
          width: 100,
          render: (h, params) => {
            return (<span>{params.row.paraPositionTrack}</span>)
          }
        },
        {
          title: '对位时间',
          width: 150,
          render: (h, params) => {
            return (<span>{params.row.paraPositionTime}</span>)
          }
        },
        {
          title: '发站名称',
          key: 'startStationName',
          width: 100
        },
        {
          title: '到站名称',
          key: 'endStationName',
          width: 100
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minWidth: 200,
          render: (h, params) => {
            let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailAction(params.row)}>查看详情</i-button>)
            let btnArray = []
            powerUtil.contains('viewDetail') && btnArray.push(viewDetailBtn)
            return (btnArray)
          }
        }
      ]
      let orderStatues = [
        // { label: '即将到站', val: '1,2,3,4' },
        {label: '已到站', val: '5'}
      ]
      let queryForm = [
        {'isContainer': '', 'truckTypeName': '全部'},
        {'isContainer': 1, 'truckTypeName': '集装箱'},
        {'isContainer': 0, 'truckTypeName': '整车运输'}
      ]
      let tabParam = {status: orderStatues[0].val}
      let checkedMainOrder = []
      let datas = {dispatchOrderType, checkedMainOrder, orderStatues, comingStationColumn, notDispatchedColumn, tabParam, queryForm, operatModal, mainOrderCurrentRow, queryFleetOrderListByPage}
      return datas
    },
    computed: {
      ...mapGetters(['currentUser', 'activeMenu'])
    },
    methods: {
      /**
       * TODO(撤销派单)
       * @auther zhangQ
       * @date 2018/6/18 20:44
       */
      dispatchRemove (row) {
        dispatchRemove({mainOrderNo: row.orderNo}).then(res => {
          if (+res.data.isSuccess === 1) {
            this.$Notice.success({
              title: '成功',
              desc: '撤销派单成功'
            })
            row._disabled = false
            row.assignmentTime = ''
          }
        })
      },
      tabFilterMethod (arr) {
        return arr
      },
      mainOrderTabSelectChange (rows) {
        this.checkedMainOrder = rows
      },
      dataRefresh () {
        this.$refs['inspectionTab'].dataRefresh()
      },
      sendNoticeAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.sendNoticeShow = true
      },
      sendNoticeClose (operatStr) {
        this.operatModal.sendNoticeShow = false
        if (operatStr === 'sendNotice') {
          this.$refs['inspectionTab'].dataRefresh()
        }
      },
      sendAssignmentOrderClose (operatStr) {
        this.operatModal.assignmentOrderShow = false
        if (operatStr === 'sendAssignmentOrderClose') {
          this.$refs['inspectionTab'].dataRefresh()
        }
      },
      viewDetailAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.viewDetailShow = true
      },
      thisDataRefresh () {
        this.$refs['inspectionTab'].dataRefresh()
      },
      /**
       * TODO(手动派单)
       * @auther zhangQ
       * @date 2018/6/12 11:17
       */
      dispatchOrder () {
        let isDisPatch = ''
        this.checkedMainOrder.forEach(item => {
          if (item.dispatchcontaninerscount > 0) {
            isDisPatch += item.orderNo + '<br>'
          }
        })
        if (isDisPatch) {
          this.$Notice.warning({
            title: '操作提示',
            desc: '运单<br>' + isDisPatch + '已派单（或已分组派单）'
          })
          return
        }
        if (this.checkedMainOrder.length > 0) {
          this.operatModal.dispatchModalShow = true
        } else {
          this.$Notice.warning({
            title: '操作提示',
            desc: '请选择主运单'
          })
        }
      }
    },
    created () {
    },
    watch: {
      tabParam: {
        handler: function (val, oldVal) {
          setTimeout(() => {
            this.$refs['inspectionTab'].dataRefresh()
          }, 200)
          this.checkedMainOrder = []
        },
        deep: true
      }
    },
    mounted () {
    },
    components: {tablePage, sendNoticeMainOrder, xlinkModal, assignmentOrder, viewDetail, dispatchToFleet}
  }
</script>

<style scoped>

</style>
